const gulp = require('gulp')
	, contentIncluder = require('gulp-content-includer')
	, scss = require('gulp-sass')
	, babel = require('gulp-babel')
	, plumber = require('gulp-plumber')
	, browserSync = require('browser-sync').create()
	, autoprefixer = require('autoprefixer-core')
	, postcss=require('gulp-postcss')
	, uglify = require('gulp-uglify')
	, concat = require('gulp-concat')
	, base64 =require('gulp-base64')
	, minify = require('gulp-minify-css')
	, htmlmini = require('gulp-minify-html')
	, csso = require('gulp-csso')
	, rev = require('gulp-rev')
	, revReplace = require('gulp-rev-replace')
	, pug =require('gulp-pug')
	, notify=require('gulp-notify')
	, gulpPugBeautify = require('gulp-pug-beautify')
	, gulpHtmlBeautigy=require('gulp-html-beautify')
	, reload = browserSync.reload;

var base64_config={
	options: {
		baseDir: 'src',
		extensions: ['png','svg'],
		maxImageSize: 10 * 1024,
		debug: false
	 }
 };

var rimraf = require('rimraf');

var $ = require('gulp-load-plugins')();

const paths = {
	pug:"src/pug/**/*.pug",
	html: 'src/html/**/*.html',
	scss: 'src/scss/**/*.scss',
	js: 'src/js/**/*.js'
	//,
	//tpl: 'src/tpl/**/*.tpl'
};

gulp.task('html', () => {
	gulp.src(paths.html)
	  .pipe(plumber())
		.pipe(contentIncluder({
            includerReg:  /<!\-\-include\s\"([\S]+)\"\-\->/g
        }))
		//.pipe(htmlmini())
		.pipe(gulp.dest('dist/html'))
});

gulp.task('htmlmin',['clean:html'],()=>{
	gulp.src(paths.html)
	  .pipe(plumber())
		.pipe(htmlmini())
		.pipe(gulp.dest('dist/html'))
});

gulp.task('scss', () => {
	gulp.src(paths.scss)
        .pipe(plumber())
        .pipe(scss())
				.pipe(postcss([autoprefixer({
            browsers: ["Android 4.1", "iOS 7.1", "Chrome > 31", "ff > 31", "ie >= 9"]
        })]))
				.pipe(csso())
				.pipe(base64(base64_config))
				.pipe(minify())
				// .pipe(rev())
				// .pipe(revReplace())
				.pipe(concat("main.css"))
        .pipe(gulp.dest('dist/css'))
});

gulp.task('pug', () =>{
   gulp.src(paths.pug)
	  .pipe(plumber())
	  .pipe(gulpPugBeautify({ omit_empty: true }))
    .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
    .pipe(pug())
		.pipe(gulpHtmlBeautigy({indentSize: 2}))
    .pipe(gulp.dest("dist/html"));
});

gulp.task('js', () => {
	gulp.src(paths.js)
    .pipe(plumber())
		.pipe(babel({
		    presets: ['stage-0','es2015']
		}))
		.pipe(concat('app.js'))
		//.pipe(uglify())
		.pipe(gulp.dest('dist/js'))
});

gulp.task('images', function () {
  return gulp.src('src/images/**/*')
		.pipe(plumber())
    .pipe($.cache($.imagemin({
        optimizationLevel: 5,
        progressive: true,
        interlaced: true
    })))
    .pipe(gulp.dest('dist/images'));
});

gulp.task('clean', function (cb) {
  rimraf('./dist', cb);
});

gulp.task('clean:html',(cb)=>{
	rimraf('./dist/html', cb);
})

gulp.task('sass',['scss']);

gulp.task('default', ['html','images' ,'scss', 'js'], () => {
    gulp.watch([paths.html], ['html']).on('change', reload);
    gulp.watch(paths.scss, ['scss']).on('change', reload);
    gulp.watch(paths.js, ['js']).on('change', reload);

	browserSync.init({
		open: true,
		server: './',
    startPath:"dist/html/index.html",
		notify: false,
        port: 9000,
        ghostMode: {
		    clicks: false,
		    forms: false,
		    scroll: false
		}
    });
});
